JS30

• Day 01 DrumKit
  • 利用data-attribute抓到 keycode 再調整CSS
  • attribute selector
    • audio = document.querySelector(audio[data-key = "${e.keyCode}"])

前端(React)

• From鐵人賽
  • 從 Hooks 開始，讓你的網頁 React 起來 01-02
    • 複習ES6重要語法：
      • 樣板字面值（Template literals／Template strings）
        • ${表達式} (順便學習了statements 和 expressions )
      • 箭頭函式（arrow functions）
        • (a)=> [} 跟 精簡版 + if no return 注意可更精簡
      • 物件屬性名稱縮寫（Shorthand property names）
        • 物件的「屬性名稱」和當成屬性值的「變數名稱」相同，可縮寫
      • 解構賦值（Destructuring assignment）
        • 快速建立變數並取值
        • 這在官方文件很常看到，第一次真正搞清楚
        • • 進階：透過解構賦值取出物件中的物件
        • 物件使用, 陣列使用
      • 展開語法和其餘語法（Spread Syntax/Rest Syntax）

後端

• 影片：成為看起來很強的後端 1-10
  • 從常見網路應用拆解，說明網路發出Request後實際經過了什麼
  • Server端介紹 了解Proxy, load balance, reverse proxy
  • TCP/IP四層架構
  • HTTP HEADER, BODY, status

資安/其他

• 閱讀過往鐵人賽找方向/尋找自己的方向，預計會參考
  • 資安這條路：領航新手的 Web Security 指南，以自建漏洞環境學習網站安全 01-03
  • 一起資安入門 -- picoCTF 探索與解題 01

閱讀

<認識媒體>
- 所有事物在發展階段的形式，都與其最終呈現的形式相反。